<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./framework/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./framework/reset.css">
		<link rel="stylesheet" href="./framework/common.css">
		<link rel="stylesheet" href="./css/feedbackList.css">
		<title>东软环保公众监督系统-网格员端</title>
		<script src="js/base.js"></script>
	</head>
	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<div class="header-box">
				<header>
					<i class="fa fa-angle-left" onclick="history.go(-1)"></i>
					<p>反馈任务列表</p>
					<i></i>
				</header>
				<div class="top-ban"></div>
				<img src="./img/header.png">
			</div>

			<ul id="PageList">
				<!-- <li>
					<div class="left">
						<div class="icon">四</div>
						<div class="info">
							<p>辽宁省 沈阳市 2022-10-25</p>
							<p>大东区盐泉路123号</p>
						</div>
					</div>
					<div class="right" onclick="location.href='feedbackInfo.html'">
						<p>去检测</p>
						<i class="fa fa-hand-o-right"></i>
					</div>
				</li>
				<li>
					<div class="left">
						<div class="icon" style="background-color: aqua;">三</div>
						<div class="info">
							<p>辽宁省 沈阳市 2022-10-25</p>
							<p>大东区盐泉路123号</p>
						</div>
					</div>
					<div class="right" onclick="location.href='feedbackInfo.html'">
						<p>去检测</p>
						<i class="fa fa-hand-o-right"></i>
					</div>
				</li>
				<li>
					<div class="left">
						<div class="icon">五</div>
						<div class="info">
							<p>辽宁省 沈阳市 2022-10-25</p>
							<p>大东区盐泉路123号</p>
						</div>
					</div>
					<div class="right" onclick="feedbackInfo()">
						<p>去检测</p>
						<i class="fa fa-hand-o-right"></i>
					</div>
				</li> -->
			</ul>
			<div class="no-data">No Data</div>
			<div id="info" style="text-align: center;font-size: 22px;background-color: aquamarine;"
				onclick="onNextPage()">点击加载更多
			</div>
			<footer style="z-index: -1;">
				<img src="./img/bottom.png">
			</footer>
		</div>
	</body>
</html>
<script>
	let gmId = localStorage.getItem("gmId");
	let lastItemId = -1;

	function onNextPage() {
		let url = "http://localhost:8080/AqiFeedBack/gridmemberPage?pageSize=5&lastItemId=" + lastItemId;
		rest(url, "get", null, function(r) {
			if (r.ok) {
				let feedbackArr = r.data.feedbacks;
				if (feedbackArr.length == 0) {
					document.getElementById("info").innerHTML = "我是有底线的";
					return;
				}
				lastItemId = feedbackArr[feedbackArr.length - 1].afId;
				let innerHTML = document.getElementById("PageList").innerHTML; // 初始化innerHTML为空字符串  
				for (let i = 0; i < feedbackArr.length; i++) {
					let feedback = feedbackArr[i];
					innerHTML += "\t<li>\n" +
						"\t\t\t\t\t<div class=\"left\">\n" +
						"\t\t\t\t\t\t<div class=\"icon\" style=\"background-color: " + feedback.color +
						";\">" + feedback.chineseExplain + "</div>\n" +
						"\t\t\t\t\t\t<div class=\"info\">\n" +
						"\t\t\t\t\t\t\t<p>" + feedback.provinceName + " " + feedback.cityName + " " + feedback
						.afDate + "</p>\n" +
						"\t\t\t\t\t\t\t<p>" + feedback.address + "</p>\n" +
						"\t\t\t\t\t\t</div>\n" +
						"\t\t\t\t\t</div>\n" +
						"\t\t\t\t\t<div class=\"right\" onclick=\"feedbackInfo(" + feedback.afId + ")\">\n" +
						"\t\t\t\t\t\t<p>去检测</p>\n" +
						"\t\t\t\t\t\t<i class=\"fa fa-hand-o-right\"></i>\n" +
						"\t\t\t\t\t</div>\n" +
						"\t\t\t\t</li>"
				}
				document.getElementById("PageList").innerHTML = innerHTML;
			}
		})
	}
	onNextPage();

	function feedbackInfo(afId) {
		localStorage.setItem("afId", afId);
		localStorage.setItem("gmId", gmId);
		location.href = 'feedbackInfo.html';
	}
</script>